<template>
    <div class="login">
        <van-nav-bar :border="false" left-arrow>
            <template #left>
                <img @click="goback" src="@/assets/img/login/goback.png">
            </template>
            <template #right>
                <i class="yu-ui-iconfont yu-ui-icon-kefu"></i>
            </template>
        </van-nav-bar>
        <h2>账号登录</h2>
        <van-form>
            <van-field v-model="username" clearable name="用户名" placeholder="请输入手机号/用户名/邮箱"
                :rules="[{ required: true }]" />
            <div class="psd">
                <van-field class="psd" v-if="!show" v-model="password" clearable type="password" name="密码"
                    placeholder="请输入密码" :rules="[{ required: true }]" />
                <van-field class="psd" v-else v-model="password" clearable name="密码" placeholder="请输入密码"
                    :rules="[{ required: true }]" />
                <div class="show" @click="show = !show">
                    <img v-if="!show" src="@/assets/img/login/unlook.png">
                    <img v-else src="@/assets/img/login/look.png">
                </div>
            </div>
            <div class="forget">
                <span>忘记密码<i class="yu-ui-iconfont yu-ui-icon-xiangyou"></i></span>
            </div>
            <van-button @click="login" block type="info" :disabled="!username || !password" native-type="submit">登录
            </van-button>
        </van-form>
        <div class="homeBtn">
            <img @click="goback" src="@/assets/img/login/home.png">
        </div>
    </div>
</template>

<script>
import "@/assets/iconfont/search.css"

export default {
    data() {
        return {
            username: '',
            password: '',
            show: false
        };
    },
    methods: {
        goback() {
            this.$router.push({ name: "home" })
        },
        login() {
            // 通过vuex中转数据
            this.$store.dispatch("loginAsync", {
                name: this.username,
                password: this.password
            }).then(res => {
                console.log(res);
                if (res.code == 200) {
                    this.$toast("登录成功")
                    // 回到首页
                    // 回到跳转前登录页面
                    let next = this.$route.query.next;
                    if (next) {
                        this.$router.push(next)
                    }
                    else {
                        this.$router.push({ name: 'home' })
                    }
                }
                else {
                    this.$toast(res.msg)
                }
            })
        }
    },
}
</script>

<style lang="less">
.login {
    .van-nav-bar {
        .van-nav-bar__content {
            height: 47px;

            .van-nav-bar__left {
                padding: 12px 6px;

                img {
                    width: 35px;
                }
            }

            .van-nav-bar__right {
                display: block;
                font-size: 22.5px;
                line-height: 1.2;
                padding: 12px;
                color: #999;
            }
        }
    }

    h2 {
        margin-top: 26px;
        margin-left: 17.5px;
        font-size: 20px;
        font-weight: 700;
        color: #414141;
        padding-bottom: 6px;
    }

    .van-form {
        padding: 0px 14.5px;

        .van-cell {
            width: 100%;
            margin-top: 29px;
            padding: 0 6px;
            border-bottom: 1px solid #eaeaea;
            display: flex;
            align-items: center;
            font-size: 14px;
            height: 42px;

            input::placeholder {
                color: #999;
                font-size: 17px;
            }
        }

        .psd {
            display: flex;
            width: 100%;
            align-items: flex-end;

            .van-cell {
                width: 284px;

                input {
                    margin-bottom: 10px;
                }
            }

            .show {
                padding-left: 23.5px;
                border-bottom: 1px solid #eaeaea;
                margin-top: -20px;

                img {
                    width: 26px;
                }
            }
        }



        .van-button {
            color: white;
            background: #ec2214;
            margin: 50px auto 0;
            font-size: 15px;
            font-weight: 500;
            width: 338px;
            height: 45px;
            line-height: 45px;
            border-radius: 3px;
            border: 1px solid transparent;
        }

        .forget {
            margin-top: 9.5px;
            font-size: 12px;
            text-align: right;
            font-weight: 500;
            color: #5f5f5f;
            line-height: 1;

            span {
                i {
                    line-height: 1.2;
                    margin-left: 8px;
                    font-size: 12px;
                }
            }
        }
    }

    .homeBtn {
        width: 47px;
        height: 47px;
        float: right;
        margin-top: 50px;
        margin-right: 12px;
    }
}
</style>